<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" itemscope itemtype="http://schema.org/Online Tool">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accessballot - Open Source Ballot Producing Software</title>

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script type="text/javascript" src="development-bundle/ui/jquery.ui.selectmenu.js"></script>
<link type="text/css" href="development-bundle/themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />

<style type="text/css">

body {
	font-family: Helvetica Neue, Helvetica, Tahoma, Trebuchet MS, Verdana, Arial, sans-serif;
	padding:15px;
	font-size: 10pt;
	margin: 0px;
	padding: 0px;
}

#mainContent {
	padding-left: 74px;
	padding-right: 74px;
}

input[type=text] {
	font-size: 1.05em;
}

h1 {
	display: block;
	clear: left;
	float:none;
}

h2 {
	display: block;
	clear: left;
	float:none;
	color: #0066ff;
	font-size: 18pt;
}

h3 {
	display: block;
	float:none;
	padding-right: 20px;
	line-height: 3em;
	clear: left;
}

h4 {
	font-weight: bold;
	font-style: italic;
	display: inline;
}

form {
	line-height: 2em;
}

.controlbar, .ui-button-text {
	font-size: .9em;
}

fieldset {
	background-color:#dfdfdf;
}

label {
	font-size: 1em;
	display:block;
	float:left;
	margin-right: 20px;
	padding-top: 10px;
	min-width: 100px;
}

textarea {
    vertical-align:top;

	width: 98%;
	height: 100px;
	border: 1px solid #cccccc;
	padding: 5px;
}

input[type="text"] {
	border: 1px solid #cccccc;
	padding: 5px;
	font-size: .9em;
}

#votingevent_container {
	color: #666666;
}

#votingevents, .ui-button {
	font-size: .9em;
}

#ddn_template, #ddn_language, #ddn_ballotdesign {
	width: 120px;
}

label {
/*	height: 1.8em; */
}

.votingevent {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-bottom-style: dotted;
	border-right-style: none;
	border-top-style: none;
	border-left-style: none;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}

.toolbar {
	padding: 10px 4px;
}

#votingevent_list p {
	margin: 0;
	margin-top: .1em;
	font-size: 10pt;
	line-height: .9em;
}

.birdseed {
	font-size: 9pt;
	line-height: 1.1em;
	text-align: right;
}


</style>




<script>

var option_list_instructions;

$(function() {

	option_list_instructions = $('#option_list').html();

	var heading = $( "#txt_heading" ),
		instructions = $( "#txt_instructions" ),
		description = $( "#txt_description" ),
		optionlabel1 = $( "#txt_optionlabel_1" ),
		optionlabel2 = $( "#txt_optionlabel_2" ),
		optionlabelparty = $( "#txt_optionlabel_party" ),
		instructions_alert = $( "#chk_instructions_alert" ),
		writein = $( "#chk_writein" ),
		twocandidates = $( "#chk_twocandidates" ),
		haveparty = $( "#chk_haveparty" ),
		allFields = $( [] ).add( heading ).add( instructions ).add( description ).add( optionlabel1 ).add( optionlabel2 ).add( optionlabelparty ).add( instructions_alert ).add( writein ).add( twocandidates ).add( haveparty ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 1000 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			if(min>0) 
				updateTips( "The length of " + n + " must be between " + min + " and " + max + " characters." );
			else
				updateTips( "The " + n + " must have fewer than " + max + " characters." );
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}





	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: $(window).height() - 40,
		width: '85%',
		modal: true,
		buttons: {

			"Add this Race or Referendum": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( heading, "heading", 1, 200 );
				bValid = bValid && checkLength( instructions, "instructions", 4, 400 );

				bValid = bValid && checkRegexp( heading, /^[a-zA-Z]([0-9a-zA-Z\s-:])+$/i, "Heading may consist of letters, numbers and spaces; and headings must begin with a letter." );

				if ( bValid ) {

					// if this is the first, then clear the instructions
					if($('#votingevent_list > div').length == 0) $('#votingevent_list').html("");

					// use the template to create/edit the votingevent
					votingevent_number = ($('#hdn_votingevent_index').val() != "") ? ($('#hdn_votingevent_index').val()) : ($('#votingevent_list > div').length);

					// if no index, then the votingevent must be a new one
					if($('#hdn_votingevent_index').val() == "") {

						new_votingevent = $($('#votingevent_template').html()).appendTo('#votingevent_list').attr('id','votingevent_' + (votingevent_number)).attr('id');
						$( '#' + new_votingevent + " .ui-icon" ).click(function() {
							$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
							$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
						});

					} else {

						// this is an edit of a votingevent.  replace the previous version with this new version

						new_votingevent = 'votingevent_' + (votingevent_number);
						$('#' + new_votingevent).html($('#votingevent_template .portlet').html());
						

					}

					$('#hdn_votingevent_index').val("");

					// insert values into the display information
					$('#' + new_votingevent + ' .portlet-header').html(heading.val() + " - <a href=\"Javascript:;\" id=\"" + "btn_editvotingevent_" + votingevent_number + "\">edit</a>");

					// add the click event for edit button
					$( "#btn_editvotingevent_" + votingevent_number )
						.click(function() {

						$( "#dialog-form" ).dialog( "open" );
						votingevent_number = $(this).attr("id").split("_")[2];

						$('#hdn_votingevent_index').val(votingevent_number);

						// Populate form fields
						$( "#dialog-form #txt_heading" ).val($('#votingevent_' + votingevent_number + ' > #hdn_heading').val());
						$( "#dialog-form #txt_instructions" ).val($('#votingevent_' + votingevent_number + ' > #hdn_instructions').val());
						$( "#dialog-form #txt_description" ).val($('#votingevent_' + votingevent_number + ' > #hdn_description').val());

						$('#dialog-form #chk_instructions_alert').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_instructions_alert' ).val() == "true") ? true : false);
						$('#dialog-form #chk_writein').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_writein' ).val() == "true") ? true : false);
						$('#dialog-form #chk_twocandidates').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_twocandidates' ).val() == "true") ? true : false);
						$('#dialog-form #chk_haveparty').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_haveparty' ).val() == "true") ? true : false);
						
						if($('#dialog-form #chk_twocandidates').prop('checked'))
							$('.second_candidate').show();
						else
							$('.second_candidate').hide();
						
						if($('#dialog-form #chk_haveparty').prop('checked'))
							$('.haveparty').show();
						else
							$('.haveparty').hide();

						$( "#dialog-form #txt_description" ).val($('#votingevent_' + votingevent_number + ' > #hdn_description').val());


						current_option_index = null;
						new_option = "";

						// create the options
						$('#votingevent_' + votingevent_number + ' #option_data .votingevent_option').each(function(index) {

							tag_option_index = $(this).attr("id").split("_")[3];
							tag_option_field = $(this).attr("id").split("_")[2];

							// if it's the first option, create the fields from the template first
							if(tag_option_field == 1) {
								// first field in the option
								new_option = $($('#option_template').html()).appendTo('#option_list').attr('id','option_' + ($('#option_list > div').length)).attr('id');
								$( '#' + new_option + " .ui-icon" ).click(function() {
									$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
									$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
								});


								// fancy up the delete button
								$('#' + new_option + ' .delete_button')
								.button({text:false, icons:{primary:'ui-icon-circle-close'}})
								.mouseenter(function() {
									$(this).addClass('ui-state-hover');
								})
								.mouseleave(function() {
									$(this).removeClass("ui-state-hover");
								});

					
								$('#' + new_option + ' #txt_optionlabel_1').val($(this).attr("value"));
					
							} else if(tag_option_field == 2) {
								// second field for the current option
								$('#' + new_option + ' #txt_optionlabel_2').val($(this).attr("value"));
							} else {
								// second field for the current option
								$('#' + new_option + ' #txt_optionlabel_party').val($(this).attr("value"));
							}
							current_option_index = $(this).attr("id").split("_")[3];
					
							$( '#option_list' ).sortable({
								cursor: "move"
							});

						});
						

					});





					new_votingeventlabel = "";

					new_votingeventlabel += (instructions.val().length > 0) ? (
							"<p><h4>Instructions: </h4>" +
							instructions.val()
						) : ("");

					new_votingeventlabel += ", <h4>Alert: </h4>" + ((instructions_alert.is(':checked')) ? (
							"<span class=\"ui-state-highlight\">&nbsp;on&nbsp;</span>"
						) : (
							"<span class=\"ui-state-highlight ui-state-disabled\">&nbsp;off&nbsp;</span>"
						));

					new_votingeventlabel += ", <h4>Write-in Option(s): </h4>" + ((writein.is(':checked')) ? (
							"<span class=\"ui-state-highlight\">&nbsp;on&nbsp;</span>"
						) : (
							"<span class=\"ui-state-highlight ui-state-disabled\">&nbsp;off&nbsp;</span>"
						));

					new_votingeventlabel += ", " + ((twocandidates.is(':checked')) ? (
							"<h4>two candidates per option</h4>"
						) : (
							"<h4>one candidate per option</h4>"
						));

					new_votingeventlabel += ", <h4>Party Affiliation: </h4>" + ((haveparty.is(':checked')) ? (
							"<span class=\"ui-state-highlight\">&nbsp;on&nbsp;</span>"
						) : (
							"<span class=\"ui-state-highlight ui-state-disabled\">&nbsp;off&nbsp;</span>"
						));
/*
					new_votingeventlabel += (instructions.val().length > 0) ? (
							"</p>"
						) : ("");
*/
					new_votingeventlabel += (description.val().length > 0) ? (
							"<p><h4>Description: </h4>" +
							description.val() +
							"</p>"
						) : ("");




					if($('#option_list > div').length > 0) {

						new_votingeventlabel += "<p><h4>Options: </h4>";
						var isfirst = true;

						$('#option_list > div').each(function(index) {

							if(!isfirst) new_votingeventlabel += ", ";

							first_field = $(this).find(':nth-child(2)').find(':first-child');

							new_votingeventlabel += first_field.attr("value");

							if(twocandidates.is(':checked')) {

								second_field = $(this).find(':nth-child(2)').find(':nth-child(2)').find(':first-child');

								if(second_field.attr("value") == "")
									new_votingeventlabel += " & (no second candidate)";
								else
									new_votingeventlabel += " & " + second_field.attr("value");

							}

							if(haveparty.is(':checked')) {

								party_field = $(this).find(':nth-child(2)').find(':nth-child(3)');

								if(party_field.attr("value") == "")
									new_votingeventlabel += " (no party affiliation)";
								else
									new_votingeventlabel += " (" + party_field.attr("value") + ")";

							}

							isfirst = false;

						});

						new_votingeventlabel += "</p>";

					}



					$('#' + new_votingevent + ' .portlet-content').html(new_votingeventlabel);

					// insert the values into the votingevent record
					$('#' + new_votingevent + ' #hdn_heading').val(heading.val());
					$('#' + new_votingevent + ' #hdn_instructions').val(instructions.val());
					$('#' + new_votingevent + ' #hdn_instructions_alert').val((instructions_alert.is(':checked')) ? ("true") : ("false"));
					$('#' + new_votingevent + ' #hdn_description').val(description.val());
					$('#' + new_votingevent + ' #hdn_writein').val((writein.is(':checked')) ? ("true") : ("false"));
					$('#' + new_votingevent + ' #hdn_twocandidates').val((twocandidates.is(':checked')) ? ("true") : ("false"));
					$('#' + new_votingevent + ' #hdn_haveparty').val((haveparty.is(':checked')) ? ("true") : ("false"));

					activeoption_count = 0;
					optionlist = "";


					$('#option_list > div').each(function(index) {

						activeoption_count++;

						first_field = $(this).find(':nth-child(2)').find(':first-child');

						new_optionhtml = "\n<span class=\"option\">\n\t<input class=\"votingevent_option firstfield\" type=\"hidden\" name=\"" + 
							first_field.attr("id") + "_" + activeoption_count + "\" id=\"" + 
							first_field.attr("id") + "_" + activeoption_count + "\" value=\"" + 
							first_field.attr("value") + "\">";

						second_field = $(this).find(':nth-child(2)').find(':nth-child(2)').find(':first-child');

						new_optionhtml += "\n\t<input class=\"votingevent_option secondfield\" type=\"hidden\" name=\"" + second_field.attr("id") + "_" + activeoption_count + "\" id=\"" + second_field.attr("id") + "_" + activeoption_count + "\" value=\"" + second_field.attr("value") + "\">";

						party_field = $(this).find(':nth-child(2)').find(':nth-child(3)');

						new_optionhtml += "\n\t<input class=\"votingevent_option secondfield\" type=\"hidden\" name=\"" + party_field.attr("id") + "\" id=\"" + party_field.attr("id") + "\" value=\"" + party_field.attr("value") + "\">\n</span>\n";

						$(new_optionhtml).appendTo($('#' + new_votingevent + ' #option_data'));

					});
			
					$('#' + new_votingevent + ' #hdn_optioncount').val(activeoption_count);




					$( '#option_list' ).sortable({
						cursor: "move"
					});
					
					$('#option_list').html(option_list_instructions);


					$('#' + new_votingevent).effect("pulsate", { times:3 }, 1000);



					// if there are enough votingevents to sort, then add the sorting instructions
					if($('#votingevent_list > div').length == 2) {
						$('#votingeventreorder_instructions').show();
						$("#votingeventreorder_instructions").effect("pulsate", { times:3 }, 1000);
					}



// =================================================================================

	
/*

	// some example regular expressions


	bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allows : a-z 0-9" );

	bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );

*/


// =================================================================================


					// clear form values
					heading.val("");
					instructions.val("");
					description.val("");
					optionlabel1.val("");
					optionlabel2.val("");
					optionlabelparty.val("");
					instructions_alert.attr('checked', false);
					writein.attr('checked', false);
					twocandidates.attr('checked', false);
					haveparty.attr('checked', false);
					
					$('.second_candidate').hide();
					$('.haveparty').hide();
					$('#option_list').html("");

					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				
				// clear form values ?

				$('.second_candidate').hide();
				$('.haveparty').hide();
				$('#option_list').html("");

				$( this ).dialog( "close" );
			}
		},
		close: function() {

			// clear form values ?

			$('.second_candidate').hide();
			$('.haveparty').hide();
			$('#option_list').html("");

			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});


});









// Generate the XML based on the form content



$(function() {

	// http://accessballot.com/sample_ballots/us_eac-sample.xml

	// first get the GET parameters
	var $_GET = {};
	
	document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
		function decode(s) {
			return decodeURIComponent(s.split("+").join(" "));
		}
	
		$_GET[decode(arguments[1])] = decode(arguments[2]);
	});

	// if the "ballot" parameter is set, populate the form
	if($_GET["ballot"] != undefined) {

		$.ajax({
			type: "GET",
			url: $_GET["ballot"],
			dataType: "xml",
			success: function (data) {

				$(data).find("header").each(function() {
					$('#txt_title').val($.trim($(this).find("title").text()));
					$('#txt_location').val($.trim($(this).find("location").text()));
					$('#txt_date').val($.trim($(this).find("date").text()));
				});

				$(data).find("template").each(function() {
					$('#txt_templateurl').val($.trim($(this).find("path").text()));
					$("#ddn_template").val($.trim($(this).find("style").text()));
					$("#ddn_language").val($.trim($(this).find("language").text()));
					$("#ddn_ballotdesign").val($.trim($(this).find("design").text()));

					$('select#ddn_template').selectmenu({style:'dropdown'}); // must reapply jquery ui style to update field value
					$('select#ddn_language').selectmenu({style:'dropdown'});
					$('select#ddn_ballotdesign').selectmenu({style:'dropdown'});
				});

				$(data).find("votingevent").each(function() {


					// if this is the first, then clear the instructions
					if($('#votingevent_list > div').length == 0) $('#votingevent_list').html("");

					// use the template to create/edit the votingevent
					votingevent_number = ($('#hdn_votingevent_index').val() != "") ? ($('#hdn_votingevent_index').val()) : ($('#votingevent_list > div').length);


					new_votingevent = $($('#votingevent_template').html()).appendTo('#votingevent_list').attr('id','votingevent_' + (votingevent_number)).attr('id');
					$( '#' + new_votingevent + " .ui-icon" ).click(function() {
						$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
						$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
					});



					$('#hdn_votingevent_index').val("");

					// insert values into the display information
					$('#' + new_votingevent + ' .portlet-header').html($.trim($(this).find("heading").text()) + " - <a href=\"Javascript:;\" id=\"" + "btn_editvotingevent_" + votingevent_number + "\">edit</a>");



					// add the click event for edit button
					$( "#btn_editvotingevent_" + votingevent_number )
						.click(function() {

						$( "#dialog-form" ).dialog( "open" );
						votingevent_number = $(this).attr("id").split("_")[2];

						$('#hdn_votingevent_index').val(votingevent_number);

						// Populate form fields
						$( "#dialog-form #txt_heading" ).val($('#votingevent_' + votingevent_number + ' > #hdn_heading').val());
						$( "#dialog-form #txt_instructions" ).val($('#votingevent_' + votingevent_number + ' > #hdn_instructions').val());
						$( "#dialog-form #txt_description" ).val($('#votingevent_' + votingevent_number + ' > #hdn_description').val());

						$('#dialog-form #chk_instructions_alert').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_instructions_alert' ).val() == "true") ? true : false);
						$('#dialog-form #chk_writein').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_writein' ).val() == "true") ? true : false);
						$('#dialog-form #chk_twocandidates').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_twocandidates' ).val() == "true") ? true : false);
						$('#dialog-form #chk_haveparty').prop('checked', ($( '#votingevent_' + votingevent_number + ' > #hdn_haveparty' ).val() == "true") ? true : false);
						
						if($('#dialog-form #chk_twocandidates').prop('checked'))
							$('.second_candidate').show();
						else
							$('.second_candidate').hide();
						
						if($('#dialog-form #chk_haveparty').prop('checked'))
							$('.haveparty').show();
						else
							$('.haveparty').hide();

						$( "#dialog-form #txt_description" ).val($('#votingevent_' + votingevent_number + ' > #hdn_description').val());


						current_option_index = null;
						new_option = "";

						// create the options
						$('#votingevent_' + votingevent_number + ' #option_data .votingevent_option').each(function(index) {

							tag_option_index = $(this).attr("id").split("_")[3];
							tag_option_field = $(this).attr("id").split("_")[2];

							// if it's the first option, create the fields from the template first
							if(tag_option_field == 1) {
								// first field in the option
								new_option = $($('#option_template').html()).appendTo('#option_list').attr('id','option_' + ($('#option_list > div').length)).attr('id');
								$( '#' + new_option + " .ui-icon" ).click(function() {
									$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
									$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
								});


								// fancy up the delete button
								$('#' + new_option + ' .delete_button')
								.button({text:false, icons:{primary:'ui-icon-circle-close'}})
								.mouseenter(function() {
									$(this).addClass('ui-state-hover');
								})
								.mouseleave(function() {
									$(this).removeClass("ui-state-hover");
								});

					
								$('#' + new_option + ' #txt_optionlabel_1').val($(this).attr("value"));
					
							} else if(tag_option_field == 2) {
								// second field for the current option
								$('#' + new_option + ' #txt_optionlabel_2').val($(this).attr("value"));
							} else {
								// second field for the current option
								$('#' + new_option + ' #txt_optionlabel_party').val($(this).attr("value"));
							}
							current_option_index = $(this).attr("id").split("_")[3];
					
							$( '#option_list' ).sortable({
								cursor: "move"
							});

						});
						

					});





					new_votingeventlabel = "";

					new_votingeventlabel += ($.trim($(this).find("instructions").text()).length > 0) ? (
							"<p><h4>Instructions: </h4>" +
							$(this).find("instructions").text()
						) : ("");

					new_votingeventlabel += ", <h4>Alert: </h4>" + (($(this).find("alert").text() == "true") ? (
							"<span class=\"ui-state-highlight\">&nbsp;on&nbsp;</span>"
						) : (
							"<span class=\"ui-state-highlight ui-state-disabled\">&nbsp;off&nbsp;</span>"
						));

					new_votingeventlabel += ", <h4>Write-in Option(s): </h4>" + (($(this).find("writeins").text() > 0) ? (
							"<span class=\"ui-state-highlight\">&nbsp;on&nbsp;</span>"
						) : (
							"<span class=\"ui-state-highlight ui-state-disabled\">&nbsp;off&nbsp;</span>"
						));

					new_votingeventlabel += ", " + (($('option:nth(0) > name', this).length == 2) ? (
							"<h4>two candidates per option</h4>"
						) : (
							"<h4>one candidate per option</h4>"
						));

					new_votingeventlabel += ", <nobr><h4>Party Affiliation: </h4>" + (($('option:nth(0) > party', this).length == 1) ? (
							"<span class=\"ui-state-highlight\">&nbsp;on&nbsp;</span></nobr>"
						) : (
							"<span class=\"ui-state-highlight ui-state-disabled\">&nbsp;off&nbsp;</span></nobr>"
						));

					new_votingeventlabel += ($.trim($(this).find("description").text()).length > 0) ? (
							"<p><h4>Description: </h4>" +
							$.trim($(this).find("description").text()) +
							"</p>"
						) : ("");

					
					

					if($('option', this).length > 0) {

						new_votingeventlabel += "<p><h4>Options: </h4>";
						var isfirst = true;

						$('option', this).each(function(index) {

							if(!isfirst) new_votingeventlabel += ", ";

							first_field = $('name:nth(0)', this);
							second_field = $('name:nth(1)', this);
							party_field = $('party:nth(0)', this);

							new_votingeventlabel += first_field.text();
							if(second_field.text() != "") new_votingeventlabel += " & " + second_field.text()
							if(party_field.text() != "") new_votingeventlabel += " (" + party_field.text() + ")"

							isfirst = false;

						});

						new_votingeventlabel += "</p>";

					}

					$('#' + new_votingevent + ' .portlet-content').html(new_votingeventlabel);






					// insert the values into the votingevent record
					$('#' + new_votingevent + ' #hdn_heading').val($.trim($(this).find("heading").text()));
					$('#' + new_votingevent + ' #hdn_instructions').val($.trim($(this).find("instructions").text()));
					$('#' + new_votingevent + ' #hdn_instructions_alert').val(($(this).find("alert").text() == "true") ? ("true") : ("false"));
					$('#' + new_votingevent + ' #hdn_description').val($.trim($(this).find("description").text()));
					$('#' + new_votingevent + ' #hdn_writein').val(($(this).find("writeins").text() > 0) ? ("true") : ("false"));
					$('#' + new_votingevent + ' #hdn_twocandidates').val(($('option:nth(0) > name', this).length == 2) ? ("true") : ("false"));
					$('#' + new_votingevent + ' #hdn_haveparty').val(($('option:nth(0) > party', this).length == 1) ? ("true") : ("false"));

					activeoption_count = 0;
					optionlist = "";


					$('option', this).each(function(index) {

						activeoption_count++;


						first_field = $('name:nth(0)', this);
						second_field = $('name:nth(1)', this);
						party_field = $('party:nth(0)', this);

						new_optionhtml = "\n<span class=\"option\">\n\t<input class=\"votingevent_option firstfield\" type=\"hidden\" name=\"txt_optionlabel_1_" + activeoption_count + "\" id=\"txt_optionlabel_1_" + activeoption_count + "\" value=\"" + 
							first_field.text() + "\">";

						new_optionhtml += "\n\t<input class=\"votingevent_option secondfield\" type=\"hidden\" name=\"txt_optionlabel_2_" + activeoption_count + "\" id=\"txt_optionlabel_2_" + activeoption_count + "\" value=\"" + second_field.text() + "\">";

						new_optionhtml += "\n\t<input class=\"votingevent_option secondfield\" type=\"hidden\" name=\"" + party_field.attr("id") + "\" id=\"txt_optionlabel_party_" + activeoption_count + "\" value=\"" + party_field.text() + "\">\n</span>\n";

						$(new_optionhtml).appendTo($('#' + new_votingevent + ' #option_data'));

					});
			
					$('#' + new_votingevent + ' #hdn_optioncount').val(activeoption_count);









				});









			}
		});

	}


	$('#generate_pdf').click(function(){

		xml = "<ballot>\n\n";
		xml += "\t<version>accessballot-EN_US_EAC-1.1</version>\n";
	
		xml += xml_header($('#txt_title').val(), $('#txt_location').val(), $('#txt_date').val());
	
		xml += xml_template($('#txt_templateurl').val(), $('#ddn_template').val());


		var votingevent_list = new Array();


		// get the list of votingevents associated with this ballot
		$('#votingevent_list > div').each(function() {


			var votingevent_current = new Array();
			var votingevent_options = new Array();


			// get the paramaters for the event itself
			$(this).find('input:not(#option_data input)').each(function() {

				var field_id = $(this).attr('id').split("_");
				field_id.splice(0,1);

				var field_id = field_id.join("_");
				var field_value = $(this).val();
				votingevent_current.push({
					'id': field_id,
					'value': field_value
				});
	
			});

//			votingevent_list.push(votingevent_current);


			// get the list of options associated the current votingevent
			$(this).find(".option").each(function() {

				var votingevent_options_current = new Array();
				name1 = undefined;
				name2 = undefined;
				party = undefined;

				$(this).children('input').each(function() {
	
					var field_id = $(this).attr('id').split("_")[2];
					var field_value = $(this).val();

					if(field_value != "") {

						if(field_id == "1") {
							name1 = field_value;
						} else if(field_id == "2") {
							name2 = field_value;
						} else if(field_id == "party") {
							party = field_value;
						} else console.log("** error: no match **");

					}
		
				});
				
				votingevent_options.push({"name1": name1, "name2": name2, "party": party});


			});
			
			xml_votingevent(votingevent_current, votingevent_options);


		});
	
		xml += "\n</ballot>\n";
		
console.log(xml);

		post('http://accessvote.com/api/us_eac/', {'s': xml});

	});

});




function post(path, parameters) {
    var form = $('<form></form>');

    form.attr("method", "post");
    form.attr("action", path);

    $.each(parameters, function(key, value) {
        var field = $('<input></input>');

        field.attr("type", "hidden");
        field.attr("name", key);
        field.attr("value", value);

        form.append(field);
    });

    // The form needs to be apart of the document in
    // order for us to be able to submit it.
    $(document.body).append(form);
    form.submit();
}



function xml_header(mytitle, mylocation, mydate) {

	xml = "\n\t<header>\n";
	xml += "\t\t<title>" + mytitle + "</title>\n";
	xml += "\t\t<location>" + mylocation + "</location>\n";
	xml += "\t\t<date>" + mydate + "</date>\n";
	xml += "\t</header>\n";
	
	return xml;

}


function xml_template(mypath, mystyle) {

	xml = "\n\t<template>\n";
	xml += "\t\t<path>" + mypath + "</path>\n";
	xml += "\t\t<style>" + mystyle + "</style>\n";
	xml += "\t</template>\n";

	
	return xml;

}

function myextract(myarray, myid) {
	
	for(index=0 ; index < myarray.length ; index++) {

		if(myarray[index]['id'] == myid)
			return myarray[index]['value'];

	}
	
	return undefined;

}

// function xml_votingevent(myheading, myinstructions, mydescription, myoptions, myalert, mywriteins) {
function xml_votingevent(myeventdata, myoptiondata) {

	xml += "\n\t<votingevent>\n";

	myheading = myextract(myeventdata, 'heading');
	if(myheading != undefined) {
		xml += "\t\t<heading>\n";
		xml += "\t\t" + myheading + "\n";
		xml += "\t\t</heading>\n";
	}

	myinstructions = myextract(myeventdata, 'instructions');
	if(myinstructions != undefined) {
		xml += "\t\t<instructions>\n";
		xml += "\t\t" + myinstructions + "\n";
		xml += "\t\t</instructions>\n";
	}
	
	option_count = (myextract(myeventdata, 'twocandidates')) == "true" ? (2) : (1);
	have_party = (myextract(myeventdata, 'haveparty')) == "true" ? (true) : (false);

	$.each( myoptiondata, function(k, v){
		xml += "\t\t<option>\n";
		xml += "\t\t\t<name>" + v['name1'] + "</name>\n";
		xml += (v['name2'] != undefined && option_count == 2) ? ("\t\t\t<name>" + v['name2'] + "</name>\n") : ("");
		xml += (v['party'] != undefined && have_party) ? ("\t\t\t<party>" + v['party'] + "</party>\n") : ("");
		xml += "\t\t</option>\n";
	});


	mydescription = myextract(myeventdata, 'description');
	if(mydescription != undefined) {
		xml += "\t\t<description>\n";
		xml += "\t\t" + mydescription + "\n";
		xml += "\t\t</description>\n";
	}

	myalert = myextract(myeventdata, 'instructions_alert');
	if(myalert != undefined) {
		xml += "\t\t<alert>" + ((myalert == "true") ? ("true") : ("false")) + "</alert>\n";
	}

	mywritein = myextract(myeventdata, 'writein');
	if(mywritein != undefined) {
		xml += "\t\t<writeins>" + ((mywritein == "true") ? (option_count) : (0)) + "</writeins>\n";
	}

	xml += "\t</votingevent>\n";

}


$.effects.pulsate = function(o) {
	return this.queue(function() {
		var elem = $(this),
			mode = $.effects.setMode(elem, o.options.mode || 'show');
			times = ((o.options.times || 5) * 2) - 1;
			duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2,
			isVisible = elem.is(':visible'),
			animateTo = 0;

		if (!isVisible) {
			elem.css('opacity', 0).show();
			animateTo = 1;
		}

		if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
			times--;
		}

		for (var i = 0; i < times; i++) {
			elem.animate({ opacity: animateTo }, duration, o.options.easing);
			animateTo = (animateTo + 1) % 2;
		}

		elem.animate({ opacity: animateTo }, duration, o.options.easing, function() {
			if (animateTo == 0) {
				elem.hide();
			}
			(o.callback && o.callback.apply(this, arguments));
		});

		elem
			.queue('fx', function() { elem.dequeue(); })
			.dequeue();
	});
};





</script>



<style>

.column { width: 100%; min-height:100px; }
#option_list {  }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 2px dashed black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }

</style>
<script>

$(function() {

	$('input[type=text], textarea').addClass("ui-corner-all");

    $( ".column" ).sortable({
		cursor: "move"
    });

    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
            .addClass( "ui-widget-header ui-corner-all" )
            .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
            .end()
        .find( ".portlet-content" );

    $( ".portlet-header .ui-icon" ).click(function() {
        $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
        $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
    });

    $( ".column" ).disableSelection();

	$('.second_candidate').hide();
	$('.haveparty').hide();
	$('#option_template').hide();
	$('#votingevent_template').hide();
	$('#welcome-message').hide();
	$('#votingeventreorder_instructions').hide();

});




$(function() {

	$('select#ddn_template').selectmenu({style:'dropdown'});
	$('select#ddn_language').selectmenu({style:'dropdown'});
	$('select#ddn_ballotdesign').selectmenu({style:'dropdown'});


	$('select#ddn_template').change(function() {
		if($('select#ddn_template').val() == "ess" && $('txt_templateurl').val() == "")
			$('#txt_templateurl').val("http://accessvote.com/sample_templates/ess-full.pdf");
	});

	$( ":button" ).button();
	$( ":submit" ).button();


	$( "#btn_addvotingevent" )
		.click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});


	$( "#btn_addoption" )
		.button()
		.click(function() {

		option_count = $('#option_list > div.portlet').length;
		if(option_count == 0) $('#option_list').html("");

		new_option = $($('#option_template').html()).appendTo('#option_list').attr('id','option_' + ($('#option_list > div').length)).attr('id');
		$( '#' + new_option + " .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});

		// transfer values from form to list
		$('#' + new_option + ' #txt_optionlabel_1').val($('#option_form #txt_optionlabel_1').val());
		$('#' + new_option + ' #txt_optionlabel_2').val($('#option_form #txt_optionlabel_2').val());
		$('#' + new_option + ' #txt_optionlabel_party').val($('#option_form #txt_optionlabel_party').val());

		// fancy up the delete button
		$('#' + new_option + ' .delete_button')
		.button({text:false, icons:{primary:'ui-icon-circle-close'}})
		.mouseenter(function() {
			$(this).addClass('ui-state-hover');
		})
		.mouseleave(function() {
			$(this).removeClass("ui-state-hover");
		});



		// clear form values
		$('#option_form #txt_optionlabel_1').val("").focus();
		$('#option_form #txt_optionlabel_2').val("");
		$('#option_form #txt_optionlabel_party').val("");


		$( '#option_list' ).sortable({
			cursor: "move"
		});

	});


});

</script>

<script type="text/javascript">

	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-24646464-2']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();

</script>


<meta itemprop="name" content="Access Ballot">
<meta itemprop="description" content="Free, Open Source software for creating paper [OMR Capable] ballots">


</head>





<body class="oneColLiqCtr">

<div id="container">

	<img src="images/AccessBallot_logo.gif" style="float: left;"><span style="color: #0066ff; font-weight: bold; font-size: 60pt; line-height:65pt; float:right; padding-right: 100px; padding-top: 10px;">Open.<br>Simple.<br>Compliant.</span>
	
	<br style="clear: both;" />
	
	<div id="mainContent">
	
		<form id="frm_ballot" name="frm_ballot" method="post" action="upload.php">

			<p>Optionally, you can load and edit previously created ballot information: <nobr><input type="text" name="filename" id="txt_xml_filename" size=60 /> <input type="submit" id="load_xml" name="load_xml" value="Load and Edit XML Ballot File from URL" /></nobr></p>

		</form>

		<form id="frm_ballot" name="frm_ballot" method="post" action="">
		
			<h2>General Ballot Information</h2>
		
			<fieldset class="ui-corner-all">
				
				<div style="float: right; width: 40%; min-width: 200px; height: 150px;">If the ballots are to be scanned with an OMR (Optical Mark Recognition) machine, then you will need to select an OMR system and probably also a template file for the registration marks.</div>
			
				<label>Ballot Title: <input type="text" name="txt_title" id="txt_title" size=35 /></label>
				<label>Location: <input type="text" name="txt_location" id="txt_location" size=35 /></label>
				<label>Date: <input type="text" name="txt_date" id="txt_date" size=35 /></label>
			
			
				<label>Language: 
					<select name="ddn_language" id="ddn_language">
						<option value="useng">US English</option>
					</select>
				</label>
				
				<label>Ballot Design: 
					<select name="ddn_ballotdesign" id="ddn_ballotdesign">
						<option value="useac">US EAC</option>
					</select>
				</label>
				
				<br style="clear: left;" />
				
					<label>OMR System: 
						<select name="ddn_template" id="ddn_template">
							<option value="">None</option>
							<option value="ess">ES&amp;S</option>
						</select>
					</label>
				
					<label>Template URL: <input type="text" name="txt_templateurl" id="txt_templateurl" size=60/></label>
				
				<br />
				
			</fieldset>
				
			<br>
			
			<h2>Races / Referendums (or Plebiscites or Initiatives)</h2>
			
			
			<fieldset class="ui-corner-all">
			
			
				<input type="button" id="btn_addvotingevent" name="btn_addvotingevent" value="Add Race/Referendum" />
				
				
				<div class="race_list" style="float:left;width:80%;">
				
					<div id="votingevent_list" class="column">
					
						Ballots can have multiple races and referendums.  Use the button on the right to add each of the races and referendums that will appear on this ballot.
					
					</div>
				
			
				</div>
				
				
				<div id="votingeventreorder_instructions" style="float:left;width:19%;">You can reorder the Races and Referendums by dragging them into new positions. You can edit a Race or Referendum by clicking the <i>edit</i> links.</div>
				
				<div style="clear:both;"></div>
		
		
			</fieldset>
		
		
			<input type="button" target="_blank" id="generate_pdf" name="generate_pdf" value="Generate Ballot PDF" />
	
		</form>
	
		<br style="line-height:25px;" />
	
		<span style="float:right;">Access Ballot is part of the Access Vote project and is <a href="http://code.google.com/p/accessballot/">Open Source</a>. <g:plusone size="small"></g:plusone></span>
	
	</div>


</div>


<!-- Voting Event edit form -->

<div id="dialog-form" title="Add a Race or Referendum">

	<p class="validateTips">Fields with a * are required.</p>

	<input type="hidden" id="hdn_votingevent_index" name="hdn_votingevent_index">

	<form>

		<fieldset class="ui-corner-all">

			<label>*Heading: <input name="txt_heading" type="text" id="txt_heading" size="60" maxlength="200" title="heading" />
			</label>

			<label>*Instructions: <input name="txt_instructions" type="text" id="txt_instructions" size="60" maxlength="400" />
			</label>
			


			<label><input type="checkbox" name="chk_instructions_alert" id="chk_instructions_alert" AUTOCOMPLETE=OFF />
        Alert? (if instructions are unusual)</label>

			<label>Description (generally this is only used for referendums): <textarea name="txt_description" cols="60" wrap="virtual" id="txt_description"></textarea>

			<span class="birdseed">make text <b>bold</b> by placing an asterisk (*) on either side of the text (e.g. *this will be bold*)<br />
			make text <i>italic</i> by placing an underscore (_) on either side of the text (e.g. _this will be italic_)</span>
			</label>
			<br />

	        <label><input type="checkbox" name="chk_writein" id="chk_writein" AUTOCOMPLETE=OFF /> Write In Candidate(s)?</label>

        </fieldset>


        <fieldset class="ui-corner-all" id="option_list" style="margin-top:10px;">

        	<p>Add candidates/options to this Race/Referendum below.  As you add options they were appear in this box.</p>

		</fieldset>

        <fieldset class="ui-corner-all" id="option_form" style="margin-top:10px;">

			<input name="txt_optionlabel_1" type="text" id="txt_optionlabel_1" size="25" maxlength="200" title="Option or Candidate Name" />
			<span class="second_candidate" style="white-space: nowrap;vertical-align:middle;">/ <input name="txt_optionlabel_2" type="text" id="txt_optionlabel_2" size="25" maxlength="200" title="" /></span>
			<input class="haveparty" name="txt_optionlabel_party" type="text" id="txt_optionlabel_party" size="25" maxlength="200" title="Party Name" />

			<input type="button" id="btn_addoption" name="btn_addoption" value="Add to list" />
			
			<br clear="both" />

			<label><input type="checkbox" name="chk_twocandidates" id="chk_twocandidates" AUTOCOMPLETE=OFF /> Two Candidate Names per Option? (e.g. President & Vice-President)</label>

			<label><input type="checkbox" name="chk_haveparty" id="chk_haveparty" AUTOCOMPLETE=OFF /> Candidate(s) belong to Parties</label>

		</fieldset>

		<span>You can reorder options by dragging them into whichever position you require.</span>

	</form>

</div>

<script>

	$(function() {

		$('#chk_twocandidates').click(function(){
			$('.second_candidate').animate({width:'toggle'},350);
		});

	});
	
	$(function() {

		$('#chk_haveparty').click(function(){
			$('.haveparty').animate({width:'toggle'},350);
		});

	});

</script>

<!-- These hidden elements are templates for inserted into the votingevent and option lists -->

<div id="option_template">

	<div class="option_draggable portlet">
	
		<div class="portlet-header">
		Option
		</div>
		<div class="portlet-content">

			<input name="txt_optionlabel_1" type="text" id="txt_optionlabel_1" size="25" maxlength="200" title="Option/Candidate" />

			<span class="second_candidate" style="white-space: nowrap;vertical-align:middle;">/ <input name="txt_optionlabel_2" type="text" class="second_candidate" id="txt_optionlabel_2" size="25" maxlength="200" title="Second Name" /></span>

			<input class="haveparty" name="txt_optionlabel_party" type="text" id="txt_optionlabel_party" size="25" maxlength="200" title="Party Name" />

	        <button type="button" class="ui-state-default ui-corner-all delete_button" title="Delete Option/Candidate" onclick="$(this).parent().parent().remove();" style="float: right;"></button>

		</div>

	</div>

</div>




<div id="votingevent_template">

	<div class="portlet">

		<div class="portlet-header"></div>
		<div class="portlet-content"></div>

		<input type="hidden" id="hdn_heading" name="hdn_heading">
		<input type="hidden" id="hdn_instructions" name="hdn_instructions">
		<input type="hidden" id="hdn_instructions_alert" name="hdn_instructions_alert">
		<input type="hidden" id="hdn_description" name="hdn_description">
		<input type="hidden" id="hdn_writein" name="hdn_writein">
		<input type="hidden" id="hdn_twocandidates" name="hdn_twocandidates">
		<input type="hidden" id="hdn_haveparty" name="hdn_haveparty">
		<input type="hidden" id="hdn_optioncount" name="hdn_optioncount">
		
		<span id="option_data"></span>

	</div>

</div>


<script type="text/javascript">

	(function() {

		var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

	})();

</script>

<div id="welcome-message" title="Welcome to Access Ballot">
	<p>
		The purpose of this form is to allow users to easily create paper ballots.  This software and the ballots it produces are free, can be optionally used with OMR machines and produces ballots that comply with multiple governmental election standards.  
		</p>
		<p>Simply fill out the form and click the "Generate Ballot PDF" button at the bottom of the page to generate your ballot.


		<div class="ui-widget">
			<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
				<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
				<strong>Notice:</strong> This is the alpha release of the Access Ballot Web Form and is still under development and in testing.  For further information please feel free to contact <a href="https://plus.google.com/u/0/b/111389343154506769264/111389343154506769264/about" style="white-space: nowrap">Stephen Akins</a>.</p>
			</div>
		</div>

	</p>
</div>

<script>
$(function() {

	if ($.cookie('welcome') != 'shown') {

		$.cookie('welcome', 'shown');

		$( "#welcome-message" ).dialog({
			modal: true,
			width: '50%',
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			}
		});

	}
});
</script>

</body>
</html>